﻿<!DOCTYPE html>
<html>
<head>
    <title>Furry Friends Campaign: jQuery Proof-of-Concept</title>
    <style>
        a:link img, a:visited img {
            display: none;
        }

        a:hover img, a:active img {
            display: block;
        }

        a {
            text-decoration: none;
            color: #000;
        }
        #clickMe {
            background: #D8B36E;
            padding:20px;
            text-align:center;
            width:205px;
            display:block;
            border: 2px solid #000;
        }
        #picframe {
            background:#D8B36E;
            padding:20px;
            width:550px;
            display:none;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <div id="showfriend">
        <a href="#">
            <h4>Our Furry Friends Need Your Help</h4>
            <img src="~/Images/large.jpg">
        </a>
    </div>
    
    <div id="clickMe"><h5>Show me the furry friend of the day</h5></div>
    <div id="picframe">
        <img src="~/Images/large.jpg" hidden="hidden">
    </div>
    <script>
        $(document).ready(function () {
            $("#clickMe").click(function () {
                $("#picframe IMG").fadeIn(10000);
                $("#picframe").slideToggle("slow");
            });
        });
    </script>

</body>
</html>
